<template>
  <div class="did-h">
    <div class="black black-h">
      <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px;text-align: center;">用户个人信息</div>
      <div>
   <el-form :model="data" label-width="250px">
      <el-form-item label="DID" class="form-item">
         <span>{{ data.did }}</span>
      </el-form-item>
      <el-form-item label="用户级别" class="form-item">
         <span>{{ data.name }}</span>
      </el-form-item>
      <el-form-item label="账号/用户名" class="form-item">
         <span>{{ data.number }}</span>
      </el-form-item>
      <el-form-item label="账号状态" class="form-item">
         <span>{{ userStatusText }}</span>
      </el-form-item>
      <el-form-item label="所属部门" class="form-item">
         <span>{{ data.department }}</span>
      </el-form-item>
      <el-form-item label="注册时间" class="form-item">
         <span>{{ data.createDate }}</span>
      </el-form-item>
      <el-form-item label="公钥" class="form-item">
         <span>{{ data.publicKey }}</span>
      </el-form-item>
      <el-form-item label="私钥" class="form-item">
         <span>{{ data.privateKey }}</span>
      </el-form-item>
   </el-form>
</div>

      <div class="did-button">
        <el-button size="medium" type="primary" @click="downloadPrivateKey">下载私钥</el-button>
      </div>

      <div>
        <el-dialog title="第一次请修改密码" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false"
          :show-close="false">
          <el-row :gutter="24" class="mt3">
            <el-col :span="20" :offset="1">
              <el-form label-position="right" label-width="80px" ref="formRef">
                <el-form-item label="旧密码">
                  <el-input v-model="form.oldPassword" placeholder="请输入旧密码" :show-password="true"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input v-model="form.newPassword" placeholder="请输入您想修改的密码" :show-password="true"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                  <el-input v-model="form.confirmPassword" placeholder="请再次输入新的密码" :show-password="true"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <div class="did-button">
            <el-button size="medium" type="primary" @click="submitForm">提交</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    created() {
      //判断是否为第一次登录
      let loginNumber = window.localStorage.getItem('loginNumber');
      if (loginNumber != 1) {
        this.dialogVisible = false;
      }
    },
    data() {
      return {
        data: {}, // 初始化为空对象
        //是否第一次登录
        dialogVisible: true,
        kycdialogVisible: false,
        //表单是否可用
        isFormDisabled: false,
        form: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: '',
        },
      };
    },
    computed: {
      userStatusText() {
        return this.data.userStatus === 1 ? '可用' : '不可用';
      },
    },
    mounted() {
      // 发起异步请求获取数据’
      this.showUserinfo();
    },
    methods: {
      downloadPrivateKey() {
        const privateKeyData = this.data.privateKey;
        const blob = new Blob([privateKeyData], {
          type: 'text/plain'
        });
        const url = URL.createObjectURL(blob);

        const link = document.createElement('a');
        link.href = url;
        link.download = 'privateKey.txt';
        link.click();

        URL.revokeObjectURL(url);
      },
      async showUserinfo() {
        let formData = new FormData();
        const number = window.localStorage.getItem('number');
        formData.append('number', number);
        let res = await this.$http.post(this.$api.userIdentity.showUserinfo, formData);
        this.data = res;
      },
      //第一次修改密码
      submitForm() {
        this.data = {
          msg: '',
          data: null,
        };

        if (this.form.newPassword !== this.form.confirmPassword) {
          this.data = {
            msg: 'Error',
            data: false,
          };
          return;
        }

        const formData = new FormData();
        formData.append('oldPassword', this.form.oldPassword);
        formData.append('newPassword', this.form.newPassword);
        formData.append('confirmPassword', this.form.confirmPassword);

        this.$http
          .post('http://localhost:8081/kyc/update', formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          })
          .then((response) => {
            this.data = response.body;
            this.$router.push({
              // 推送方法
              path: '/', //导航的路径
            });
          })
          .catch((error) => {
            console.error(error);
            this.data = {
              msg: 'Error',
              data: false,
            };
          });
      },
    },
  };
</script>

<style lang="less" scoped>
  .did-content {
    margin-top: 10%;

    h1 {
      color: #666666;
      width: 320px;
      margin: 0 auto;
    }
  }

  .did-button {
    width: 100px;
    margin: 0 auto;
    margin-top: 20px;
  }

  .m-a0 {
    margin: 0 auto;
  }

  .black-h {
    height: 80%;
  }

  .black-height {
    height: calc(50% - 90px);
  }

  .nodata {
    margin-top: 10%;
  }

  .did-width {
    width: 500px;
    margin: 0 auto;
  }

  .text-c {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
  }

  /* Added code */
  .personal-info {
    width: 500px;
    margin: 0 auto;
    padding: 20px;
  }

  .info-item {
    display: flex;
    margin-bottom: 10px;
    margin-left: -400px;
  }

  .info-label {
    flex: 0 0 150px;
    font-weight: bold;
  }

.form-item {
  margin-right: 50px; /* 调整间距大小 */
}


  .info-value {
    flex: 1;
  }
   .form-item span {
      font-size: 15px; /* 设置数据的字体大小为 18 像素 */
   }
</style>